<template>
    <div>
        <basic-container>
            <avue-crud
                    :data="list"
                    :option="tableOption"
                    ref="crud"
                    @on-load="getList"
                    :table-loading="listLoading"
                    :page="page"
                    @search-change="handleFilter"
                    @refresh-change="handleRefreshChange"
            >
                <template slot-scope="scope"
                          slot="menuBtn">
                    <el-dropdown-item divided
                                      v-if="permissions.sys_activiti_task_manage"
                                      @click.native="audit(scope.row,scope.index)">审批
                    </el-dropdown-item>
                    <el-dropdown-item divided
                                      v-if="permissions.sys_activiti_task_manage"
                                      @click.native="comment(scope.row,scope.index)">批注
                    </el-dropdown-item>
                    <el-dropdown-item divided
                                      v-if="permissions.sys_activiti_task_manage"
                                      @click.native="viewPic(scope.row,scope.index)">流程图
                    </el-dropdown-item>
                </template>
            </avue-crud>
        </basic-container>
        <el-dialog title="任务办理"
                   :visible.sync="showTask">
            <avue-form ref="taskForm" v-model="form" :option="formOption">
                <template slot-scope="scope" slot="menuForm">
                    <el-button icon="el-icon-check"
                               @click="handleAgree()"
                               plain>同意
                    </el-button>
                    <el-button icon="el-icon-check"
                               @click="handleTaskDisAgree(form)"
                               plain>不同意
                    </el-button>
                </template>
            </avue-form>
        </el-dialog>
        <el-dialog title="选择审批人员"
                   :visible.sync="dialogVisible" append-to-body>
            <el-select v-model="selectUser" multiple placeholder="请选择">
                <el-option
                        v-for="item in personOptions"
                        :key="item.userId"
                        :label="item.userName"
                        :value="item.userId">
                </el-option>
            </el-select>
            <div slot="footer"
                 class="dialog-footer">
                <el-button type="primary"
                           @click="submit(selectUser)">提交
                </el-button>
            </div>
        </el-dialog>
        <el-dialog title="批注列表"
                   :visible.sync="showComment">
            <avue-crud :data="taskTableData" :option="taskOption"></avue-crud>
        </el-dialog>
        <el-dialog title="流程图"
                   :visible.sync="showPicDialog">
            <img :src="actPicUrl" v-if="showPicDialog" width="100%">
        </el-dialog>
    </div>
</template>

<script>
    import {listPage,getOne,userList,taskDisAgree,taskAgree,comments,viewById} from "@/api/activiti/task";
    import {tableOption,formOption,taskOption} from '@/const/activiti/task';
    import {mapGetters} from "vuex";

    export default {
        data() {
            return {
                dialogVisible: false,
                selectUser: '',
                personOptions:[],
                actPicUrl: '',
                listLoading: false,
                list:[],
                form:{},
                leave:{},
                flagList: {},
                showTask: false,
                showComment: false,
                showPicDialog: false,
                tableData: [],
                taskTableData: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                tableLoading: false,
                tableOption: tableOption,
                formOption: formOption,
                taskOption: taskOption,
            }
        },
        computed: {
            ...mapGetters(["permissions"])
        },
        methods: {
            //获取分页数据
            getList(page, params) {
                this.listLoading = true;
                listPage(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params)).then(response => {
                    this.list = response.data.data.records
                    this.page.total = response.data.data.total
                    this.listLoading = false;
                })
            },
            audit(row){
                getOne(row.taskId).then(response => {
                    this.form = response.data.data.leave
                    // 根据连线判断下次的流程
                    this.flagList = response.data.data.flags
                    this.showTask = true
                })
                this.obj = row
            },
            comment: function (row) {
                comments(row.taskId).then(response => {
                    this.taskTableData = response.data.data
                })
                this.showComment = true
            },
            viewPic: function (row) {
                viewById(row.taskId).then(response => {
                    this.actPicUrl = response.data.data
                })
                this.showPicDialog = true
            },
            handleAgree(){
                this.$refs['taskForm'].validate((valid) => {
                    if(valid){
                        userList().then((response) =>{
                            this.personOptions = response.data.data
                            this.getList(this.page);
                        });
                        this.dialogVisible = true
                    }
                })
            },
            submit(selectUser){
                taskAgree({'userIds':selectUser,'taskId':this.form.taskId,'comment':this.form.comment})
                    .then(() => {
                        this.showTask = false
                        this.getList(this.page)
                    })
            },
            handleTaskDisAgree() {
                this.$refs['taskForm'].validate((valid) => {
                    if(valid){
                        taskDisAgree({'taskId':this.form.taskId,'comment':this.form.comment})
                            .then(() => {
                                this.showTask = false
                                this.dialogVisible = false
                               this. getList(this.page)
                        })
                    }
                })
            },
            handleFilter(param) {
                this.page.page = 1;
                this.getList(this.page, param);
            },
            handleRefreshChange() {
                this.getList(this.page)
            }
        }
    }
</script>
